<template>
	<view style="height:100vh;">
		<layout :a_icon="false" layoutTitle="供应商审核">
			<div class="card-container">
				<a-spin :spinning="spinning" style="width:100%"/>
				<uni-card class="custom-card" hover-class="hover-view" v-for="(item, index) in listData"
					:style="{ borderLeftColor: color[index % color.length] }" @click="openDialog(item)">
					<el-row style="width:100%" :gutter="10">
						<el-col :span="7" class="card-actions-item">
							<uni-icons color="#fed71a" type="notification" :size="23"></uni-icons>
							<text class="card-actions-item-text">
								今日申请
							</text>
						</el-col>
						<el-col :span="5" class="card-actions-item comp-name"
							:style="{ backgroundColor: color[index % color.length] }">
							<text class="card-actions-item-text" style="color:white">
								{{item.contact}}
							</text>
						</el-col>
						<el-col :span="5">
						</el-col>
						<el-col span>
							<text>
								{{item.shortName}}
							</text>
						</el-col>
					</el-row>
					<el-row style="width:100%" type="flex" justify="space-between" align="stretch">
						<el-col :span="12" class="card-actions-item2">
							<el-statistic :value="item.name">
								<template #title>
									<div style="display: inline-flex; align-items: center">
										Company Name
										<el-icon :size="12">
											<Tickets />
										</el-icon>
									</div>
								</template>
							</el-statistic>
						</el-col>
						<el-col :span="12" class="card-actions-item2">
							<n-button size="tiny" secondary type="success">
								{{item.applyUser}}
							</n-button>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="13">
							<text>
								联系电话：{{item.contactTel}}
							</text>
						</el-col>
						<el-col :span="10">
							<text>
								{{item.applyTime}}
							</text>
						</el-col>
					</el-row>
				</uni-card>
			</div>
		</layout>


		<uni-popup ref="openButton" type="bottom">
			<uni-popup-dialog type="error" cancelText="驳回" confirmText="通过" title="您真的要处理该项吗？" content=""
				@confirm="TongGuo" @close="BoHui">
				<template #default>
					<view class="close-icon" @click="proxy.$refs.openButton.close()">
						✖
					</view>
				</template>
			</uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref
	} from "vue";
	import {
		listSupplier4Audit,
		auditSupplier,
		updateSupplier
	} from "@/api/purchase/supplier";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	const choose = ref({});
	const color = ref(["#ef475d", "#5e7987", "#12a182"]);
	const spinning=ref(true);
	
	const dialogVisible = ref(false); // 控制对话框的显示与隐藏
	const {
		proxy
	} = getCurrentInstance();
	// 打开对话框并传入选中的卡片项
	const openDialog = (item) => {
		choose.value = item;
		proxy.$refs.openButton.open('center')
	};

	function TongGuo(item) {
		console.log("通过");
		updateSupplier({
			id: choose.value.id,
			auditStatus: 1,
			applyStatus: 2
		}).then(ref => {
			getList();
			choose.id = -1;
		})
	}

	function BoHui() {
		console.log("驳回");
		updateSupplier({
			id: choose.value.id,
			auditStatus: 0,
			applyStatus: 2
		}).then(ref => {
			getList();
		})
	}

	const listData = ref();

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getList() {
		try {
			const res = await listSupplier4Audit({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 1
			});

			console.log(res);
			const rows = res.rows;

			// 使用 Promise.all 并行查询，提高效率
			const updatedRows = await Promise.all(
				rows.map(async (item) => {
					const admin = await getQuery("query_user", item.applyUser);
					return {
						...item,
						applyUser: admin
					}; // 复制 item 并修改 applyUser
				})
			);

			listData.value = updatedRows; // 更新响应式数据
			spinning.value=false;
			console.log(updatedRows)
		} catch (error) {
			console.error("获取供应商列表失败:", error);
		}
	}

	getList();
</script>

<style scoped>
	.custom-card {
		position: relative;
		width: 92%;
		margin: 20rpx auto;
		border-radius: 20rpx;
		border-left: none;
		box-shadow: 0 8rpx 30rpx rgba(14, 125, 98, 0.15);
		overflow: hidden;
		transition: all 0.3s ease;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		position: relative;
	}
	
	.custom-card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 8rpx;
		background: linear-gradient(to bottom, var(--card-accent-color, #20b573), rgba(32, 181, 115, 0.6));
		border-radius: 6rpx;
	}

	.card-container {
		display: flex;
		background: linear-gradient(135deg, #1f6a50, #089268);
		width: 100%;
		min-height: 100vh;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		position: relative;
		overflow: hidden;
	}
	
	.card-container::before {
		content: '';
		position: absolute;
		top: -100rpx;
		right: -100rpx;
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(32, 181, 115, 0.3) 0%, rgba(32, 181, 115, 0) 70%);
		z-index: 0;
	}
	
	.card-container::after {
		content: '';
		position: absolute;
		bottom: -150rpx;
		left: -150rpx;
		width: 500rpx;
		height: 500rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(32, 181, 115, 0.2) 0%, rgba(32, 181, 115, 0) 70%);
		z-index: 0;
	}

	.card-actions-item-text {
		font-size: 24rpx;
		color: #607d8b;
		margin-left: 12rpx;
		letter-spacing: 1rpx;
		font-weight: 500;
	}

	.card-actions-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 12rpx 0;
		position: relative;
		z-index: 2;
	}

	.card-actions-item2 {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 16rpx 0;
		position: relative;
		z-index: 2;
	}

	.comp-name {
		transform: skew(-12deg);
		color: white;
		border-radius: 12rpx;
		padding: 8rpx 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.hover-view {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 30rpx rgba(14, 125, 98, 0.25);
		transition: all 0.2s ease;
	}

	/* 弹出对话框样式 */
	.dialog-content {
		padding: 50rpx;
		text-align: center;
		border-radius: 24rpx;
		background-color: white;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	}

	.dialog-footer {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.close-icon {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		font-size: 32rpx;
		color: #666;
		cursor: pointer;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: rgba(245, 245, 245, 0.8);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}
	
	.close-icon:hover {
		background-color: rgba(240, 240, 240, 1);
		transform: scale(1.05);
	}

	:deep(.uni-card__content) {
		padding: 24rpx;
		position: relative;
		z-index: 2;
	}

	:deep(.uni-card__header) {
		padding: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
		background-color: rgba(32, 181, 115, 0.05);
		position: relative;
		z-index: 2;
	}

	:deep(.el-row) {
		margin-bottom: 16rpx;
		position: relative;
		z-index: 2;
	}

	:deep(.el-statistic__head) {
		margin-bottom: 8rpx;
		color: #607d8b;
		font-size: 24rpx;
	}

	:deep(.el-statistic__content) {
		font-size: 30rpx;
		font-weight: bold;
		color: #1f6a50;
		letter-spacing: 1rpx;
	}
	
	:deep(.n-button) {
		background: linear-gradient(135deg, #20b573, #089268);
		color: white;
		border: none;
		border-radius: 10rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(32, 181, 115, 0.3);
		transition: all 0.3s ease;
	}
	
	:deep(.n-button:hover) {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 16rpx rgba(32, 181, 115, 0.4);
	}
</style>